<template>
  <div>
    <Card title="接口自动化测试—统计" :bordered="false" :dis-hover="true">
      <Row :gutter="20">
        <i-col
          :xs="12"
          :md="8"
          :lg="4"
          v-for="(infor, i) in summaryData"
          :key="`infor-${i}`"
          style="height: 120px; padding-bottom: 10px"
        >
          <infor-card
            shadow
            :color="infor.color"
            :icon="infor.icon"
            :icon-size="36"
          >
            <count-to :end="infor.count" countClass="count-style" />
            <p>{{ infor.title }}</p>
          </infor-card>
        </i-col>
      </Row>
      <Table
        :columns="reportsColumns"
        :data="reportsData"
        :loading="loading"
        :highlight-row="true"
        border
        size="small"
        style="margin-top: 10px"
        @on-row-click="clickTableRow"
      >
        <template slot-scope="{ row }" slot="project_name">
          <Tooltip placement="bottom" transfer :max-width="500">
            <div slot="content" style="white-space: normal">
              {{ row.project.name }}
            </div>
            {{ row.project.name }}
          </Tooltip>
        </template>
        <template slot-scope="{ row }" slot="environment">
          {{ row.environment.total }}
        </template>
        <template slot-scope="{ row }" slot="module">
          {{ row.module.total }}
        </template>
        <template slot-scope="{ row }" slot="api_initial">{{
          row.api.initial
        }}</template>
        <template slot-scope="{ row }" slot="api_pass">{{
          row.api.pass
        }}</template>
        <template slot-scope="{ row }" slot="api_partial_pass">{{
          row.api.partial_pass
        }}</template>
        <template slot-scope="{ row }" slot="api_fail">
          <!-- <div :class="row.api.fail>0?'fail':''">{{row.api.fail}}</div> -->
          <div :class="{ fail: row.api.fail > 0 }">{{ row.api.fail }}</div>
        </template>
        <template slot-scope="{ row }" slot="api_total">{{
          row.api.total
        }}</template>
        <template slot-scope="{ row }" slot="testsuite_initial">{{
          row.testsuite.initial
        }}</template>
        <template slot-scope="{ row }" slot="testsuite_pass">{{
          row.testsuite.pass
        }}</template>
        <template slot-scope="{ row }" slot="testsuite_partial_pass">{{
          row.testsuite.partial_pass
        }}</template>
        <template slot-scope="{ row }" slot="testsuite_fail">
          <!-- <div :class="row.testsuite.fail>0?'fail':''">{{row.testsuite.fail}}</div> -->
          <div :class="{ fail: row.testsuite.fail > 0 }">
            {{ row.testsuite.fail }}
          </div>
        </template>
        <template slot-scope="{ row }" slot="testsuite_total">{{
          row.testsuite.total
        }}</template>
        <template slot-scope="{ row }" slot="testcase_initial">{{
          row.testcase.initial
        }}</template>
        <template slot-scope="{ row }" slot="testcase_pass">{{
          row.testcase.pass
        }}</template>
        <template slot-scope="{ row }" slot="testcase_fail">
          <!-- <div :class="row.testcase.fail>0?'fail':''">{{row.testcase.fail}}</div> -->
          <div :class="{ fail: row.testcase.fail > 0 }">
            {{ row.testcase.fail }}
          </div>
        </template>
        <template slot-scope="{ row }" slot="testcase_total">{{
          row.testcase.total
        }}</template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
    <Card :title="title" :bordered="false" :dis-hover="true">
      <ProjectSummaryReports
        :projectSummaryData="projectSummaryData"
      ></ProjectSummaryReports>
      <Divider />
      <TestTrendResultReports :project="project"></TestTrendResultReports>
    </Card>
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import ProjectSummaryReports from "@/view/components/HttpAutoTestService/reports/project-summary-reports";
import TestTrendResultReports from "@/view/components/HttpAutoTestService/reports/test-trend-result-reports";
import { off } from "@/libs/tools";
import { getSummary, getReports } from "@/api/HttpAutoTestService/reports";

export default {
  name: "reports",
  components: {
    InforCard,
    CountTo,
    ProjectSummaryReports,
    TestTrendResultReports,
  },
  mounted() {
    getSummary().then((res) => {
      const data = res.data;
      this.summaryData.environment.count = data.environment;
      this.summaryData.project.count = data.project;
      this.summaryData.module.count = data.module;
      this.summaryData.api.count = data.api;
      this.summaryData.testsuite.count = data.testsuite;
      this.summaryData.testcase.count = data.testcase;
    });
    this.getReports();
  },
  data() {
    return {
      title: "项目报表",
      loading: true,
      project: {
        id: "",
        name: "",
      },
      projectSummaryData: {},
      summaryData: {
        environment: {
          title: "环境",
          icon: "md-settings",
          count: 0,
          color: "#9A66E4",
        },
        project: {
          title: "项目",
          icon: "md-folder",
          count: 0,
          color: "#2d8cf0",
        },
        module: {
          title: "模块",
          icon: "md-list-box",
          count: 0,
          color: "#19be6b",
        },
        api: {
          title: "接口",
          icon: "md-outlet",
          count: 0,
          color: "#ff9900",
        },
        testsuite: {
          title: "场景",
          icon: "md-list",
          count: 0,
          color: "#ed3f14",
        },
        testcase: {
          title: "用例",
          icon: "md-paper",
          count: 0,
          color: "#E46CBB",
        },
      },
      reportsColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left",
        },
        {
          title: "项目名称",
          slot: "project_name",
          width: 250,
          ellipsis: true,
          fixed: "left",
        },
        {
          title: "环境",
          slot: "environment",
          align: "center",
        },
        {
          title: "模块",
          slot: "module",
          align: "center",
        },
        {
          title: "接口",
          align: "center",
          children: [
            {
              title: "初始状态",
              slot: "api_initial",
              width: 85,
              align: "center",
            },
            {
              title: "通过",
              slot: "api_pass",
              align: "center",
            },
            {
              title: "部分通过",
              slot: "api_partial_pass",
              width: 85,
              align: "center",
            },
            {
              title: "失败",
              slot: "api_fail",
              align: "center",
            },
            {
              title: "总数",
              slot: "api_total",
              align: "center",
            },
          ],
        },
        {
          title: "场景",
          align: "center",
          children: [
            {
              title: "初始状态",
              slot: "testsuite_initial",
              width: 85,
              align: "center",
            },
            {
              title: "通过",
              slot: "testsuite_pass",
              align: "center",
            },
            {
              title: "部分通过",
              slot: "testsuite_partial_pass",
              width: 85,
              align: "center",
            },
            {
              title: "失败",
              slot: "testsuite_fail",
              align: "center",
            },
            {
              title: "总数",
              slot: "testsuite_total",
              align: "center",
            },
          ],
        },
        {
          title: "用例",
          align: "center",
          children: [
            {
              title: "初始状态",
              slot: "testcase_initial",
              width: 85,
              align: "center",
            },
            {
              title: "通过",
              slot: "testcase_pass",
              align: "center",
            },
            {
              title: "失败",
              slot: "testcase_fail",
              align: "center",
            },
            {
              title: "总数",
              slot: "testcase_total",
              align: "center",
            },
          ],
        },
      ],
      reportsData: [],
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
    };
  },
  methods: {
    beforeDestroy() {
      off(window, "resize", this.resize);
    },
    getReports(page) {
      let data = {
        page: 1,
        page_size: this.page.pageSize,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getReports(data).then((res) => {
        const data = res.data;
        this.reportsData = data.results;
        this.page.total = data.count;
        this.loading = false;
        if (Array.isArray(this.reportsData) && this.reportsData.length > 0) {
          let reportData = this.reportsData[0];
          this.projectSummaryData = reportData;
          this.project = reportData.project;
          this.title = `项目报表 - ${this.project.name}`;
        }
      });
    },
    clickTableRow(row, index) {
      this.drawCharts(row);
    },
    drawCharts(row) {
      this.project = row.project;
      this.title = `项目报表 - ${this.project.name}`;
      this.projectSummaryData = row;
    },
    change(val) {
      this.page.current = val;
      this.getReports(val);
    },
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.getReports();
    },
  },
};
</script>
<style scoped>
.fail {
  color: #ed3f14;
}
</style>
